import React from 'react';
import {connect} from 'react-redux';
import {getListData,addToCart} from './../action/product';
import {getDetail} from './../action/detail';
import {Link,hashHistory,Redirect } from 'react-router';
import { Notification } from 'element-react';
import { MessageBox } from 'element-react';
import { Button } from 'element-react';
class ProductPage extends React.Component{
    
    componentWillMount(){
        const {fakeAuth,page} = this.props;
        if (!fakeAuth.isAuthenticated) {
            MessageBox.confirm('您还未登录, 是否去登录?', '提示', {
                    type: 'warning'
                }).then(() => {
                    hashHistory.push('/login')
                }).catch(() => {
                Notification.info({
                    title: '提示',
                    message: '已取消，返回首页',
                    duration:2000
                });
                hashHistory.push('/')
              });
            // hashHistory.push('/unlogin')
            return false;
        }
        this.props.getListData({page:page,limit:8});
    }

    changePage(e){
        var page=e.currentTarget.getAttribute('data-page');
        var params= {page:parseInt(page),limit:8};
		this.props.getListData(params);
	}

    addCart(e){
		const idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        const addToCartProduct=this.props.lists.rows[idx];
        this.props.addToCart(addToCartProduct);
    }
    lookDetail(e){
        let id=e.currentTarget.getAttribute('data-id');
        this.props.getDetail(id);
        hashHistory.push('/detail')
    }

    render(){
        const {lists,fetchList,addToCart,fakeAuth} = this.props;
        if(!lists.rows){
            return <Button type="primary" style={{width:'220px',height:'110px',margin:'16% 40%'}} loading={true}>加载中</Button>
        }
        var output= [];
        var pages = 1;
		var outputPages=[];

		pages=lists.pages;
		for(let i=1;i<=pages;i++){
			outputPages.push(
				<li key={i}>
			        <a href="javascript:void(0)" data-page={i} style={{zIndex:'0'}} onClick={(e)=>this.changePage(e)}>{i}
			        	<span className="sr-only"></span>
			        </a>
			    </li>
			)
		}

        var ls=lists.rows;
        for(let i=0;i<lists.rows.length;i++){
            output.push(
                <div className="col-lg-3" key={i} style={{textAlign:'center',width:'284px',height:'360px',padding:'0'}}>
                    <img className="img" src={ls[i].picurl} alt="Generic placeholder image" width="180" height="180"/>
                    <h3 style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
                        {ls[i].productname}
                    </h3>
                    <p>单价：{ls[i].unitprice}元</p>
                    <p>产地：{ls[i].origin}</p>
                    <p>
                        <a className="btn btn-default" href="javascript:void(0)" role="button" data-id={ls[i]._id} onClick={(e)=>this.lookDetail(e)}>查看详情 &raquo;</a>&nbsp;
                        <a className="btn btn-primary" href="javascript:void(0)" role="button" data-idx={i} onClick={(e)=>this.addCart(e)}>加入购物车</a>
                    </p>
                </div>
            )
        }

        return(
            <div>
                <nav aria-label="..." style={{height:'60px'}}><ul className="pagination">{outputPages}</ul></nav>
                <div className="row">
                    {output}
                </div>
                <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
            </div>
        )
    }
}

const getValue = (state)=>{
    console.log(state)
    return {
        lists:state.product.lists,
        fakeAuth:state.auth.fakeAuth,
        page:state.product.curpage
    }
}

const Product = connect(getValue , {getListData,addToCart,getDetail})(ProductPage);

export default Product;